<template>
	<div class="tabsClass">
		<div class="treesty">
			<el-tabs
				v-model="activeName"
				v-loading="state.loading"
				class="demo-tabs"
				@tab-change="handleClick"
			>
				<el-tab-pane label="组织架构" name="0"></el-tab-pane>
				<el-tab-pane label="项目类型" name="1"></el-tab-pane>
			</el-tabs>

			<el-tree
				:data="data"
				:node-key="state.tabId"
				default-expand-all
				:expand-on-click-node="false"
				@node-click="handleNodeClick"
			>
				<template #default="{ data }">
					<span class="custom-tree-node">
						<!-- <span>{{ data.departmentName }}</span> -->
						<span>{{ data[state.tabName] }}</span>
					</span>
				</template>
			</el-tree>
		</div>
		<div style="flex: 1" class="tabBox">
			<tableIndex
				ref="tableRef"
				:tableData="tableData"
				:tableHead="tableHead"
				:isIndex="true"
				:isSelection="true"
				:isRadio="false"
				:fields="state.fields"
				:height="500"
				:page="page"
				@searchList="searchList"
				@page-change="pageChange"
			>
				<template #btns>
					<div style="float: right">
						<!-- <el-button size="small" plain class="update"> 查询</el-button> -->
						<el-button
							size="small"
							plain
							class="update"
							@click="addProjectHandler"
							><svg-icon icon-class="add-icon-1" /> 添加</el-button
						>
						<!-- <el-button size="small" plain class="update"
              ><svg-icon icon-class="export" /> 重置</el-button
            > -->
						<el-button
							size="small"
							plain
							class="update"
							@click="
								onExport({
									...getSearchData(),
									prepareStatus: -1,
								})
							"
							><svg-icon icon-class="export" />一键导出</el-button
						>
					</div>
				</template>
				<template #topic="{ row }">
					<span v-if="row.meetingApplyStatus == 1">审核中</span>
					<span v-else-if="row.meetingApplyStatus == 2">通过</span>
					<span v-else-if="row.meetingApplyStatus == 3">驳回</span>
					<span v-else> 待审核 </span>
					<span
						v-if="row.meetingApplyStatus"
						@click="projectProposal(row, '查看')"
						class="look_sty"
						>查看</span
					>
				</template>
				<template #metting="{ row }">
					<span v-if="row.projectApplyStatus == 1">审核中</span>
					<span v-else-if="row.projectApplyStatus == 2">通过</span>
					<span v-else-if="row.projectApplyStatus == 3">驳回</span>
					<span v-else> 待审核 </span>
					<span
						v-if="row.projectApplyStatus"
						@click="projectApprove(row, '查看')"
						class="look_sty"
						>查看</span
					>
				</template>
				<template #operate >
					<el-table-column
						label="操作"
						width="400"
						align="center"
						fixed="right"
					>
						<template #default="{ row }">
							<el-button
								size="small"
								class="end"
								type="primary"
								@click="projectStageHandler(row)"
								>项目阶段</el-button
							>
							<el-button
								v-if="!row.meetingApplyStatus"
								size="small"
								class="look"
								type="primary"
								@click="projectProposal(row)"
								>立项议题</el-button
							>
							<el-button
								v-if="row.meetingApplyStatus == 2"
								size="small"
								class="look"
								type="primary"
								@click="projectApprove(row)"
								>立项审批</el-button
							>
							<el-button
								size="small"
								class="update"
								type="primary"
								@click="editProjectHandler(row)"
								>编辑</el-button
							><el-button
								size="small"
								class="end"
								type="primary"
								@click="lookHandler(row)"
								>查看</el-button
							><el-button
								size="small"
								class="look_kb"
								type="primary"
								@click="deleteHandle(row)"
								>删除</el-button
							>
						</template>
					</el-table-column>
				</template>
			</tableIndex>
			<preliminaryCom ref="preliminary"></preliminaryCom>
			<projectStage ref="projectstage"></projectStage>
			<preliminaryspDialog ref="preliminarysp"></preliminaryspDialog>
		</div>
	</div>
</template>
<script setup>
import "@/views/constructionProjectManage/static/button.scss";
import TableIndex from "@/components/table/index.vue";
import { ref, reactive, onMounted, onBeforeMount } from "vue";
import PreliminaryCom from "./components/preliminaryDialog.vue";
import ProjectStage from "./components/projectPhaseDialog.vue";
import PreliminaryspDialog from "./components/preliminaryspDialog.vue";
import {
	ElTabPane,
	ElTabs,
	ElMessage,
	ElMessageBox,
} from "element-plus";
import {useRouter } from "vue-router";
import {projectConfigApi, publicProject, department, deriveApi} from "@/api/project.js";
import { deriveHandelFnc } from "@/hooks/downCommon";
import {exportExcelFile} from "@/common/utils/GlobalUtils";

//路由跳转
let router = useRouter();
let tableRef = ref(null);
let activeName = reactive("0");
let preliminary = ref(null);
let projectstage = ref(null);
let preliminarysp = ref(null);
let data = reactive([]);
let state = reactive({
	tabId: "departmentId",
	tabName: "departmentName",
	loading: true,
	fields: [
		{ key: "projectName", label: "项目名称", type: "input" },
		{ key: "responsibleUserName", label: "发起责任人", type: "input" },
		// { key: 'prepareStatus', label: '项目名称', type: 'input',defaultValue:-1 },
		{
			key: "projectTypeId",
			label: "项目类型",
			type: "select",
			options: {
				list: [
					{
						label: "全部",
						value: "",
					},
					{
						label: "未开工",
						value: -2,
					},
					{
						label: "停工",
						value: -1,
					},
					{
						label: "竣工",
						value: 1,
					},
					{
						label: "其他",
						value: 2,
					},
					{
						label: "已立项项目",
						value: 3,
					},
				],
			},
		},
	],
});
const formInline = reactive({
	user: "",
	region: "",
	date: [],
	radio: 0,
});
// tabs相关

const handleClick = (e) => {
	switch (activeName) {
		case "0":
			state.loading = true;
			getdepartmentList();
			state.tabId = "departmentId";
			state.tabName = "departmentName";
			break;
		case "1":
			state.loading = true;
			publicProjectData();
			state.tabId = "projectTypeId";
			state.tabName = "typeName";
			break;
		default:
			break;
	}
};

const page = reactive({
	page: 1,
	pageSize: 10,
	total: 0,
});
// tree相关的数据

const handleNodeClick = (data) => {
	let obj = {
		departmentId: data.departmentId || "",
		projectTypeId: data.projectTypeId || "",
		...getSearchData(),
	};
	getPage(obj);
};
const defaultProps = {
	children: "children",
	label: "label",
};
// --------------
// table相关
let tableHead = reactive([
	{
		prop: "projectName",
		label: "项目名称",
		width: "120",
		style: {
			color: "#FC7018",
		},
	},
	{
		prop: "responsibleDepartmentName",
		label: "项目发起部门",
	},
	{
		prop: "typeName",
		label: "项目类型",
	},
	{
		prop: "streetName",
		label: "所属街道",
	},
	{
		prop: "responsibleUserName",
		label: "发起责任人",
	},
	{
		prop: "submitCompany",
		label: "报送单位",
	},
	{
		prop: "projectAmount",
		label: "项目总投(万)",
	},
	//   {
	//     prop: 'applyTime',
	//     label: '立项时间'
	//   },
	{
		prop: "meetingApplyStatus",
		label: "立项议题状态",
		slot: "topic",
	},
	{
		prop: "projectApplyStatus",
		label: "立项会议状态",
		slot: "metting",
	},
]);
let tableData = ref([]);
const projectProposal = (row, type) => {
	if (type == "查看") {
		preliminary.value.state.disabled = true;
	}
	preliminary.value.state.centerDialogVisible = true;
	preliminary.value.state.projectId = row.projectId;
	preliminary.value.state.projectTypeId = row.projectTypeId;
	preliminary.value.getBfProjectSubjectMeetingView(row);
};
//项目阶段
const projectStageHandler = (row) => {
	projectstage.value.state.centerDialogVisible = true;
	(projectstage.value.state.projectTypeId = row.projectTypeId),
		(projectstage.value.state.projectId = row.projectId);
};
//立项审批
const projectApprove = (row, type) => {
	if (type == "查看") {
		preliminarysp.value.state.disabled = true;
	}
	preliminarysp.value.state.centerDialogVisible = true;
	preliminarysp.value.getBfbfProjectApprovalFormView(row);
};
//项目阶段添加
const addProjectHandler = () => {
	router.push(
		`/constructionProjectManage/preliminaryProject/components/preliminaryInfo/type=0&projectId=${""}`
	);
};
//项目阶段修改
const editProjectHandler = (row) => {
	router.push(
		`/constructionProjectManage/preliminaryProject/components/preliminaryInfo/type=1&projectTypeId=${row.projectTypeId}&projectId=${row.projectId}`
	);
};
//项目查看
const lookHandler = (row) => {
	router.push(
		`/constructionProjectManage/projectmanagement/lookindex/type=1&projectId=${row.projectId}&projectName=${row.projectName}`
	);
};
const deleteHandle = (row) => {
	ElMessageBox.confirm("确认删除吗?", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(() => {
			projectConfigApi.prepareRemove(row.projectId || "").then((res) => {
				if (res.code == "200") {
					ElMessage.success("删除成功");
					getPage();
				}
			});
		})
		.catch(() => {});
};
const getpublicProject = () => {
	publicProject.getProjectTypeVo("").then((res) => {
		if (res.code == 200) {
			res.data.forEach((item) => {
				state.fields[2].options.list.push({
					label: item.parentTypeName,
					value: item.projectTypeId,
				});
			});
		}
	});
};
//搜索查询
const searchList = (e) => {
	getPage(e);
};
//分页
const pageChange = (e) => {
	page.page = e.page;
	page.pageSize = e.limit;

	getPage();
};

const getPage = (e) => {
	let data = {
		pageNum: page.page,
		pageSize: page.pageSize,
		param: {
			...e||getSearchData(),
			prepareStatus: -1,
		},
	};

	projectConfigApi.getProjectPage(data).then((res) => {
		if (res.code == 200) {
			tableData.value = res.data.content;
			page.total = res.data.totalSize;
			console.log(tableData);
		}
	});
};
//获取部门信息
const getdepartmentList = () => {
	department.getProjectPhase().then((res) => {
		if (res.code == 200) {
			data = res.data;
			state.loading = false;
		}
	});
};
//获取搜索组件数据
const getSearchData = () => {
	return tableRef.value.getSearchData();
};
//获取项目类型
const publicProjectData = () => {
	publicProject.getProjectTypeTreeVo().then((res) => {
		if (res.code == 200) {
			data = res.data;
			state.loading = false;
		}
	});
};

const exportConfig = reactive({
	fileName: "预备项目管理",
	apiPath: "projectExport",
	form: {},
});
// const { onExport } = deriveHandelFnc(exportConfig);

const onExport = (prams) => {
	deriveApi.preparatoryProjectExport(prams).then(res=>{
		if (res) {
			exportExcelFile(res, '预备项目管理');
		}
	});
}

onBeforeMount(() => {
	getdepartmentList();
});
onMounted(() => {
	getPage();
	getpublicProject();
});
</script>
<style lang="scss" scoped>
.tabsClass {
	display: flex;
	.treesty {
		width: 13%;

		margin-right: 10px;
		.demo-tabs {
			width: 100%;
		}
		.el-tree {
			overflow-y: scroll;
			height: 500px;
		}
	}
	.tabBox {
		width: 83%;
	}
}
</style>
